<template>
  <div class="account-security">
    <!-- 头部 -->
    <div class="demo-nav" style="">
      <div class="demo-nav__title">账户安全</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="fanhui()">
        <path
          fill="#969799"
          fill-rule="evenodd"
          d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
        ></path>
      </svg>
    </div>
    <!-- 内容 -->
    <div class="butm">
      <div class="divli">
        <div class="left">密码</div>
        <div class="middle"></div>
        <button class="right" @click="onmodify">修改</button>
      </div>
      <div class="divli">
        <div class="left">绑定手机号</div>
        <div class="middle">{{ name }}</div>
        <button class="right">修改</button>
      </div>
      <div class="divli">
        <div class="left">绑定邮箱</div>
        <div class="middle"></div>
        <button class="right">去绑定</button>
      </div>
      <div class="divli">
        <div class="left">注销账户</div>
        <div class="middle"></div>
        <button class="right">注销</button>
      </div>
    </div>
  </div>
</template>

<script>
import { personalDataAPI } from "../../api/setup";

export default {
  data() {
    return {
      name: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
    onmodify() {
      this.$router.push("/mimashezhi");
    },
    fanhui() {
      this.$router.push("/setup");
    },
    // 调用用户信息
    async yonghu() {
      const result = await personalDataAPI();
      this.name = result.userName;
    },
  },
  created() {
    this.yonghu();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
/* 头部 */
.demo-nav {
  justify-content: center;
  height: 45px;
  background-color: #fff;
  position: relative;
  display: flex;
  line-height: 45px;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}
.demo-nav__title {
  font-weight: 600;
  font-size: 18px;
}
.demo-nav__back {
  position: absolute;
  font-size: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  color: #323233;
}
/* 内容 */
.divli {
  width: 85%;
  height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.left {
  width: 76px;
  color: #111;
  text-align: left;
}
.middle {
  flex: 1;
  color: #959595;
  text-align: left;
  margin-left: 20px;
}
.right {
  color: #005a89;
  text-align: right;
  border: none;
  background-color: #fff;
}
</style>
